<template>
  <div class="issue_plate_container">
    <div class="issue_plate">
      <div @click="toTitle1" class="animate__animated animate__backInLeft">
        <p>新品发售</p>
        <img
          src="https://www.uniqlo.cn/public/image/L3/spl-contents/feature/UNIQLO_at_HOME/210825/men/1280_210827_TOP.jpg"
          alt=""
        />
      </div>
      <div @click="toTitle2" class="animate__animated animate__backInRight">
        <p>热销专场</p>
        <img
          src="https://www.uniqlo.cn/public/image/L3/spl-contents/feature/flannel/2021/men/1280_210806_01.jpg"
          alt=""
        />
      </div>
      <div @click="toTitle3" class="animate__animated animate__backInLeft">
        <p>当季推荐</p>
        <img
          src="https://www.uniqlo.cn/public/image/L3/spl-contents/feature/sweat/2021/men/1280_210806_TOP.jpg"
          alt=""
        />
      </div>
      <div @click="toTitle4" class="animate__animated animate__backInRight">
        <p>衣几社区</p>
        <img
          src="https://www.uniqlo.cn/public/image/L3/spl-contents/feature/jeans/202107/men/1280-210723-TOP.jpg"
          alt=""
        />
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "HomeIssuePlate",
  data() {
    return {
      issueplate: "",
      product: {},
    };
  },
  methods: {
    toTitle1() {
      this.$axios.get("/api/product/getProductByDate").then((res) => {
        this.product = res.data.data;
        this.$router.push({name: 'ProductIssueShow',params:{id:this.product}})
      });
    },
    toTitle2() {
      this.$axios.get("/api/product/getProductByDiscount").then((res) => {
        this.product = res.data.data;
        this.$router.push({name: 'ProductIssueShow',params:{id:this.product}})
      });
    },
    toTitle3() {
      this.$axios.get("/api/product/getProductByKeywords?goods_title=秋").then((res) => {
        this.product = res.data.results;
        this.$router.push({name: 'ProductIssueShow',params:{id:this.product}})
      });
    },
    toTitle4(){
      this.$router.push('/community')
    },
  },
};
</script>
<style scoped>
.issue_plate_container {
  width: 100%;
  height: 800px;
}
.issue_plate_container p{
  z-index: 99;
}
.issue_plate {
  width: 1170px;
  height: 100%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.issue_plate div {
  width: 40%;
  height: 40%;
  margin-top: 60px;
}

.issue_plate div img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.6s;
}

.issue_plate div img:hover {
  transform: scale(0.9);
}

.issue_plate div {
  position: relative;
}

.issue_plate div p {
  text-align: center;
  position: absolute;
  top: 40%;
  left: 35%;
  font-size: 40px;
  color: #fff;
}
</style>